<script setup lang="ts">
import {
  Drawer,
  Form,
  FormItem,
  Row,
  Col,
  Input,
  Textarea,
  Button,
  RadioGroup,
  RadioButton,
  TreeSelect,
} from "ant-design-vue";
import { reactive, ref, toRaw } from "vue";
import { menuSelectApi } from "@/api/System/menu";
import type { Rule } from "ant-design-vue/es/form";

const formRef = ref();
// 定义状态
const state = reactive({
  visible: false,
  type: '',
  title: "新增",
});
const onClose = () => {
  state.visible = false;
};
const useForm = Form.useForm;
const optionsMenu = ref([]);
let modelStateRef = reactive({
  parentId: "",
  type: "",
  title: "",
  code: "",
  path: "",
  name: "",
  icon: "",
  redirect: "",
  hidden: "",
  cache: "",
  sort: "",
  remark: "",
});
const rules: Record<string, Rule[]> = {
  parentId: [
    {
      required: true,
      message: "请选择上级菜单",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择菜单类型",
      trigger: "change",
    },
  ],
  title: [
    {
      required: true,
      message: "请输入菜单名称",
    },
  ],
  path: [
    {
      required: true,
      message: "请输入菜单名称",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入权限标识",
    },
  ],

  name: [
    {
      required: true,
      message: "请输入路由名称相对路径",
    },
  ],
  icon: [
    {
      required: true,
      message: "请输入图标名",
    },
  ],
  redirect: [
    {
      required: true,
      message: "请输入路由重定向地址redirect值",
    },
  ],
  hidden: [
    {
      required: true,
      message: "请选择是否隐藏",
      trigger: "change",
    },
  ],
  cache: [
    {
      required: true,
      message: "请选择是否缓存",
      trigger: "change",
    },
  ],
};
const { resetFields } = useForm(modelStateRef);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", modelStateRef, toRaw(modelStateRef));
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};
const handleOpenIcon = () => {
  window.open("https://icon-sets.iconify.design/akar-icons/trash-can/");
};
const getMenuList = async () => {
  const { data } = await menuSelectApi();
  optionsMenu.value = data;
};
const open = (type: any, title: any, row: any) => {
  state.title = title;
  state.type = type;
  if (row && type === "edit") {
    modelStateRef.title = row.meta?.title;
    modelStateRef.parentId = row.id;
    modelStateRef.type = row.type;
    modelStateRef.code = row.code;
    modelStateRef.path = row.path;
  }
  if (row && type === "addSon") {
    modelStateRef.parentId = row.id;
  }
  state.visible = true;
  getMenuList();
};

// 导出给父组件调用
defineExpose({
  open,
});
</script>
<template>
  <Drawer
    width="800px"
    v-model:open="state.visible"
    :title="state.title"
    @close="resetFields"
    destroyOnClose
  >
    <Form
      ref="formRef"
      :model="modelStateRef"
      :labelCol="{ style: 'width: 100px' }"
      :rules="rules"
    >
      <Row>
        <Col :span="24">
          <FormItem label="上级菜单" name="parentId">
            <TreeSelect
              v-model:value="modelStateRef.parentId"
              placeholder="请选择上级菜单"
              :disabled="state.type === 'addSon'"
              :fieldNames="{
                value: 'id',
              }"
              :treeData="optionsMenu"
            /> </FormItem
        ></Col>
        <Col :span="24">
          <FormItem label="菜单类型" name="type">
            <RadioGroup v-model:value="modelStateRef.type" button-style="solid">
              <RadioButton value="1">菜单</RadioButton>
              <RadioButton value="2">按钮</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem
            :label="modelStateRef.type === '1' ? '菜单名称' : '按钮名称'"
            name="title"
          >
            <Input
              v-model:value="modelStateRef.title"
              :placeholder="
                modelStateRef.type === '1' ? '输入菜单名称' : '请输入按钮名称'
              "
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="权限标识" name="code">
            <Input
              v-model:value="modelStateRef.code"
              placeholder="请输入权限标识"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="路由地址" name="path">
            <Input
              v-model:value="modelStateRef.path"
              placeholder="请输入路由地址"
            /> </FormItem
        ></Col>
        <Col :span="12" v-if="modelStateRef.type === '1'">
          <FormItem label="路由名称" name="name">
            <Input
              v-model:value="modelStateRef.name"
              placeholder="请输入路由名称"
            /> </FormItem
        ></Col>
        <Col :span="12" v-if="modelStateRef.type === '1'">
          <FormItem label="菜单图标">
            <div class="flex">
              <Input
                v-model:value="modelStateRef.icon"
                placeholder="请输入菜单图标"
              />
              <Button type="link" @click="handleOpenIcon">图标地址</Button>
            </div>
          </FormItem></Col
        >
        <Col :span="12" v-if="modelStateRef.type === '1'">
          <FormItem label="重定向">
            <Input
              v-model:value="modelStateRef.redirect"
              placeholder="请输入重定向"
            /> </FormItem
        ></Col>
        <Col :span="12" v-if="modelStateRef.type === '1'">
          <FormItem label="是否隐藏">
            <RadioGroup
              v-model:value="modelStateRef.hidden"
              button-style="solid"
            >
              <RadioButton value="1">不隐藏</RadioButton>
              <RadioButton value="2">隐藏</RadioButton>
            </RadioGroup>
          </FormItem></Col
        >
        <Col :span="12" v-if="modelStateRef.type === '1'">
          <FormItem label="是否缓存">
            <RadioGroup
              v-model:value="modelStateRef.cache"
              button-style="solid"
            >
              <RadioButton value="1">不缓存</RadioButton>
              <RadioButton value="2">缓存</RadioButton>
            </RadioGroup>
          </FormItem></Col
        >
        <Col :span="12">
          <FormItem label="排序号">
            <Input
              v-model:value="modelStateRef.sort"
              placeholder="请输入排序号"
            /> </FormItem
        ></Col>
        <Col :span="24">
          <FormItem label="备注">
            <Textarea
              v-model:value="modelStateRef.remark"
              placeholder="请输入备注"
            /> </FormItem
        ></Col>
      </Row>
    </Form>
    <template #footer>
      <div class="text-right">
        <Button style="margin-right: 8px" @click="onClose">关闭</Button>
        <Button type="primary" @click="onSubmit">提交</Button>
      </div>
    </template>
  </Drawer>
</template>

<style scoped></style>
